<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="./lib/vue-2.4.0.js"></script>
    <link rel="stylesheet" href="./lib/bootstrap-3.3.7.css">
</head>

<body>
    <div id="app">

        <div class="panel panel-primary">
            <div class="panel-heading">
                <p class="panel-title">品牌列表</p>
            </div>
            <div class="panel-body form-inline">
                <label>
                    ID:
                    <input type="text" v-model="id">
                </label>
                <label>
                    Name:
                    <input type="text" v-model="name" @keyup.f2="add()">
                </label>

                <button type="button" class="btn btn-primary" @click="add()">增加</button>

                <label>
                    搜索:
                    <input type="text" v-model="primarykey" v-focus v-color="'green'">

                    <button type="button" class="btn btn-primary">确认</button>

                </label>
            </div>
        </div>

        <table class="table table-bordered table-hover">
            <thead>
                <tr>
                    <th>id</th>
                    <th>name</th>
                    <th>time</th>
                    <th>operation</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="item in search(primarykey)">
                    <td>{{item.id}}</td>
                    <td v-fontsize="20">{{item.name}}</td>
                    <td>{{item.time| dateFormat('')}}</td>
                    <td>
                        <a href="#" @click.prevent="del(item.id)">删除</a>
                    </td>
                </tr>
            </tbody>
        </table>

        <button type="button" class="btn btn-default" v-color="btncolor">button</button>

        <input type="text" v-model="btncolor">
        
        
        <input type="text" name="" v-model="btncolor" id="input" v-model="btncolor" class="col-sm-2" value="" required="required" pattern="" title="">
        
        
        
        <p v-fontsize="30">测试自定义指令</p>




    </div>
</body>
<script>
    // 自定义指令
    Vue.directive("focus", {
        inserted: function (el) {
            el.focus()
        }
    })
    // 改变颜色
    Vue.directive("color", {
        bind: function (el, binding) {
            // el.style.color = 'red'
            el.style.color = binding.value
        }
    })
    // 
    Vue.directive("change", {

    })
    // 自定义键盘名
    Vue.config.keyCodes.f2 = 113
    Vue.filter('dateFormat', function (dateStr, pattren = '') {
        var dt = new Date(dateStr)
        var year = dt.getFullYear()
        var month = (dt.getMonth() + 1).toString().padStart(2, '0') //月份从零开始
        var day = dt.getDate().toString().padStart(2, '0') //getDate()获取的日期，getDay()获取的是周几

        if (pattren && pattren.toLowerCase() == 'yyyy-mm-dd') {
            return `${year}-${month}-${day}`
        } else {
            var hour = dt.getHours().toString().padStart(2, '0')
            var min = dt.getMinutes().toString().padStart(2, '0')
            var sec = dt.getSeconds().toString().padStart(2, '0')
            return `${year}-${month}-${day} ${hour}:${min}:${sec}`
        }

    })
    var vm = new Vue({
        el: '#app',
        data: {
            id: '',
            name: '',
            primarykey: '',
            btncolor: 'red',
            list: [
                { id: 1, name: "apple", time: new Date() },
                { id: 2, name: "goole", time: new Date() },
                { id: 3, name: "Microsoft", time: new Date() },
            ]
        },
        methods: {
            add() {
                var car = { id: this.id, name: this.name, time: new Date() };
                this.list.push(car);
                this.id = this.name = '';
            },
            search(primarykey) {
                var newList = [];
                this.list.forEach(item => {
                    if (item.id.toString().indexOf(primarykey) != -1 || item.name.indexOf(primarykey) != -1) {
                        newList.push(item);
                    }
                })
                return newList;
            },
            del(id) {
                this.list.some((item, i) => {
                    if (item.id == id) {
                        this.list.splice(i, 1);
                    }
                })
            },

        },
        filters: {

        },
        directives: {
            'fontsize': {
                bind: function (el, binding) {
                    el.style.fontSize = parseInt(binding.value) + 'px'
                }
            }
        }
    })
</script>

</html>